<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>节点的创建添加和删除</title>
    <style>
      table,
      td {
        border: 1px solid #ccc;
        border-collapse: collapse;
        text-align: center;
        width: 800px;
        height: 30px;
      }

      div {
        border: 1px solid #ccc;
        border-radius: 20px;
        text-align: center;
        width: 100px;
        height: 20px;
      }

      div:hover {
        background-color: #a5a5a5;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>111</td>
          <td>111</td>
          <td>111</td>
          <td><a href="#">删除</a></td>
        </tr>
        <tr>
          <td>222</td>
          <td>222</td>
          <td>222</td>
          <td><a href="#">删除</a></td>
        </tr>
        <tr>
          <td>333</td>
          <td>333</td>
          <td>333</td>
          <td><a href="#">删除</a></td>
        </tr>
      </tbody>
    </table>

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>
    <script>
      //创建繁琐,但是拼接性能优秀简便
      /* //创建节点
      const newTr = document.createElement('tr')
      const td1 = document.createElement('td')
      td1.innerHTML = 444
      //把td绑定到tr上
      newTr.appendChild(td1)
      const td2 = document.createElement('td')
      td2.innerHTML = 555
      //把td绑定到tr上
      newTr.appendChild(td2)
      const td3 = document.createElement('td')
      td3.innerHTML = 666
      //把td绑定到tr上
      newTr.appendChild(td3)
      const td4 = document.createElement('td')
      const a = document.createElement('a')
      a.href = '#'
      a.innerHTML = '删除'
      td4.append(a)
      newTr.appendChild(td4)
      //把tr拼接到表格上
      document.querySelector('tbody').appendChild(newTr) */

      //innerHTML
      //创建简单,拼接繁琐,性能差
      /*  let data = `<tr><td>111</td><td>222</td><td>333</td><td><a href='#'>删除</a></td></tr>`
      let newData = document.querySelector('tbody').innerHTML + data
      document.querySelector('tbody').innerHTML = newData */

      //框架可以完美解决
      $('tbody').append(`<tr><td>111</td><td>222</td><td>333</td><td><a href='#'>删除</a></td></tr>`)
    </script>
  </body>
</html>
